<!-- Tabs标签页，页面包裹层，包含页面tabs、基本信息、插槽 -->
<template>
    <div class="yd-page-basic">
        <div class="page-title">
            <div class="title-name">{{ title }}</div>
            <div class="title-sub">{{ subTitle }}</div>
            <div class="extra">
                <slot name="extra"></slot>
            </div>
        </div>
        <div class="page-main">
            <slot></slot>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        subTitle: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            
        };
    },
    mounted() {
        
    },
    methods: {
        
    }
};
</script>
<style scoped lang='scss'>
.yd-page-basic {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-FFFFFF-141414);
    border: 1px solid var(--color-FFFFFF-FFFFFF_2);
    border-radius: 10px;
    .page-title {
        height: 88px;
        padding: 12px 40px 0;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--color-F2F3F5-292929);
        .title-name {
            margin-right: 16px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 18px;
            color: var(--color-1A1C1F-EBEBEB);
            line-height: 28px;
        }
        .title-sub {
            margin-right: 16px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: var(--color-76777A-8A8A8A);
            line-height: 20px;
        }
        .extra {
            margin-left: auto;
        }
    }
    .page-main {
        height: 0;
        flex: 1;
    }
}
</style>